<template>
  <div style="height: 100%; width: 100%">
    <div class="top_box">
      <div
        v-for="(item, index) in top_list"
        :key="item.id"
        :class="top_index == item.id ? 'top_select' : ''"
        @click="top_index = index + 1"
      >
        {{ item.name }}
      </div>
    </div>
    <el-divider style="border-color: #f0f0f0; margin-bottom: 10px"></el-divider>
    <key
      v-if="top_index == 1"
      style="height: calc(100% - 60px); width: 100%"
    ></key>
    <bigImg
      v-if="top_index == 2"
      style="height: calc(100% - 60px); width: 100%"
    ></bigImg>
    <imgBorder
      v-if="top_index == 3"
      style="height: calc(100% - 60px); width: 100%"
    ></imgBorder>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import key from './deepPlugin/key.vue'
import bigImg from './deepPlugin/bigImg.vue'
import imgBorder from './deepPlugin/imgBorder.vue'
import EventBus from '@/utils/EventBus'
const top_list = ref([
  { id: 1, name: '密钥管理' },
  { id: 2, name: '通用大样管理' },
  { id: 3, name: '图框管理' },
])
onMounted(() => {
  EventBus.on('change_default_active', () => {
    top_index.value = 1
  })
})
onUnmounted(() => {
  EventBus.off('change_default_active')
})

const top_index = ref(1)
</script>

<style lang="scss" scoped>
.top_box {
  display: flex;
  align-items: center;
  cursor: pointer;
  > div {
    padding: 10px 20px;
  }
  .top_select {
    color: #3580eb;
  }
}
</style>
